<route lang="json5" type="page">
  {
    "name": "home",
    "layout": "tabbar",
    "style": {
      "disableScroll": true,
      "navigationStyle": "custom",
      "enablePullDownRefresh": false
    }
  }
</route>

<script setup lang="ts">
import {
  allFunctionList,
  current,
  handleItemClick,
  noticeInfo,
  recommendList,
  swiperList,
} from './index'

// 生命周期钩子
onLoad(() => {
  console.log('Home page loaded')
})

onShow(() => {
  console.log('Home page shown')
})
</script>

<template>
  <view class="main-bar">
    <!-- 轮播图部分 -->
    <view class="swiper-container">
      <wd-swiper
        v-model:current="current"
        autoplay
        custom-indicator-class="custom-indicator-class"
        custom-image-class="custom-image"
        custom-next-image-class="custom-image-prev"
        custom-prev-image-class="custom-image-prev"
        :indicator="{ type: 'dots' }"
        :list="swiperList"
        previous-margin="24px"
        next-margin="24px"
      />
    </view>

    <view class="pt-4">
      <wd-notice-bar type="info" :text="noticeInfo" prefix="sound" />
    </view>

    <!-- 推荐功能部分 -->
    <view v-if="recommendList.length > 0" class="recommend-section pt-4">
      <wd-card custom-class="my-card recommend-card">
        <template #title>
          <wd-icon name="star-on" size="18" color="#FFD700" />
          &nbsp;
          <wd-text
            text="推荐功能"
          />
        </template>
        <wd-grid :column="2" clickable>
          <wd-grid-item
            v-for="item in recommendList"
            :key="item.id"
            :url="item.path"
            :icon="item.icon"
            :text="item.name"
            @itemclick="() => handleItemClick(item)"
          />
        </wd-grid>
      </wd-card>
    </view>

    <!-- 全部功能部分 -->
    <view class="all-functions-section w-full pt-4">
      <wd-card custom-class="my-card functions-card">
        <template #title>
          <wd-icon name="windows-filled" size="18" color="#4f46e5" />
          &nbsp;
          <wd-text
            text="全部功能"
          />
        </template>
        <wd-grid :column="3" clickable>
          <wd-grid-item
            v-for="item in allFunctionList"
            :key="item.id"
            :url="item.path"
            :icon="item.icon"
            :text="item.name"
            @itemclick="() => handleItemClick(item)"
          />
        </wd-grid>
      </wd-card>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
